import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';

const NotificationSettings: React.FC = () => {
    const { t } = useTranslation();
    const [isNotificationsEnabled, setIsNotificationsEnabled] = useState(true);

    const handleToggleNotifications = () => {
        setIsNotificationsEnabled(!isNotificationsEnabled);
        // 这里可以添加实际保存设置的逻辑
    };

    return (
        <div className="w-[350px] sm:w-[450px] md:w-[580px] lg:w-[640px] relative bg-zinc-900 rounded-[10px] border border-[#282828] mx-auto mb-5 md:mb-10">
            <div className="w-full h-[0px] border-t border-[#363636]"></div>
            <div className="flex-col justify-start items-start gap-3.5 inline-flex p-8">
                <div className="text-white text-base font-medium leading-relaxed">
                    {t('settings.automaticNotifications')}
                </div>
                <div className="justify-start items-start gap-2 inline-flex">
                    <div className="w-6 h-6 relative">
                        <input
                            type="checkbox"
                            checked={isNotificationsEnabled}
                            onChange={handleToggleNotifications}
                            className="w-6 h-6 cursor-pointer"
                        />
                    </div>
                    <div className="text-white text-sm font-light leading-normal">
                        {t('settings.notificationDescription')}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default NotificationSettings; 